WebXR-i varjud: süvaülevaade realistlikust valgustusest ja varjude kaardistamisest

Tärkavas WebXR-i universumis on ülim eesmärk luua tõeliselt kaasahaaravaid elamusi. Püüame ehitada virtuaalseid ja liitmaailmu, mis ei ole mitte ainult interaktiivsed, vaid ka usutavad. Paljude realismi soodustavate elementide seas paistab üks silma oma sügava psühholoogilise mõju poolest: varjud. Hästi renderdatud vari võib objekti ruumis ankurdada, selle vormi defineerida ja stseenile elu sisse puhuda. Seevastu selle puudumine võib muuta ka kõige detailsema mudeli lamedaks, ühendamatuks ja 'hõljuvaks'.

Realistlike reaalajas varjude rakendamine veebibrauseris, eriti virtuaal- ja liitreaalsuse nõudlikus kontekstis, on aga üks suurimaid väljakutseid, millega arendajad silmitsi seisavad. WebXR nõuab suuri kaadrisagedusi (90 Hz või rohkem) ja stereorenderdamist (mõlema silma jaoks eraldi vaade), seda kõike laialdase riistvara spektriga, alates tipptasemel arvutitest kuni eraldiseisvate mobiilsete peakomplektideni.

See juhend on põhjalik ülevaade valgustusest ja varjudest WebXR-is. Me lahutame lahti digitaalsete varjude taga oleva teooria, vaatame läbi praktilise rakendamise populaarsete teekidega nagu Three.js ja Babylon.js, uurime täiustatud tehnikaid suurema realismi saavutamiseks ning, mis kõige tähtsam, süveneme jõudluse optimeerimise strateegiatesse, mis on sujuva ja mugava kasutajakogemuse tagamiseks kriitilise tähtsusega. Olenemata sellest, kas olete kogenud 3D-arendaja või alles alustate oma teekonda kaasahaaravate veebitehnoloogiate maailma, annab see postitus teile teadmised, kuidas valgustada oma WebXR-maailmu vapustavate ja realistlike varjudega.

Varjude fundamentaalne roll XR-is

Enne kui süveneme tehnilisse 'kuidas'-küsimusse, on ülioluline mõista 'miks'-küsimust. Miks on varjud nii olulised? Nende tähtsus ulatub kaugemale pelgast visuaalsest kaunistusest; nad on meie 3D-ruumi tajumise alustalad.

Taju psühholoogia: objektide ankurdamine reaalsusesse

Meie aju on loodud tõlgendama maailma visuaalsete vihjete kaudu ja varjud on peamine teabeallikas. Need annavad meile teavet:

• Asukoht ja lähedus: Vari ühendab objekti pinnaga. See eemaldab ebaselguse objekti asukoha kohta. Kas see pall on põrandal või hõljub sellest mõne sentimeetri kõrgusel? Vari annab lõpliku vastuse. AR-is on see veelgi olulisem virtuaalsete objektide sujuvaks sulandamiseks reaalse maailmaga.
• Mõõtkava ja kuju: Varju pikkus ja kuju võivad anda olulist teavet objekti suuruse ja valgusallika suuna kohta. Pikk vari viitab madalal asuvale päikesele, samas kui lühike vari näitab, et see on otse pea kohal. Varju kuju aitab ka meie ajul paremini mõista seda heitva objekti 3D-vormi.
• Pinna topograafia: Varjud paljastavad pinna kontuurid, millele nad langevad. Ebatasasel maastikul laiuv vari aitab meil tajuda maapinna kühme ja lohke, lisades keskkonnale rikkaliku detailikihi.

Kaasahaaravuse ja kohalolu tunde suurendamine

XR-is on 'kohalolu' tunne, et oled tegelikult virtuaalses keskkonnas. See on uskmatuse peatumine. Korralike varjude puudumine on suur kaasahaaravuse rikkuja. Varjudeta objektid tunduvad hõljuvat, purustades illusiooni, et nad on osa ühtsest maailmast. Kui virtuaalse tegelase jalad on pehme varjuga kindlalt maas, tunduvad nad kohe palju kohalolevamad ja reaalsemad.

Kasutaja interaktsiooni suunamine

Varjud on ka võimas, mitteverbaalne suhtlusvahend kasutaja interaktsiooniks. Näiteks kui kasutaja paigutab AR-rakenduses virtuaalset mööblitükki, annab selle objekti vari kohest ja intuitiivset tagasisidet selle asukoha kohta põranda suhtes. See muudab täpse paigutamise lihtsamaks ning interaktsiooni loomulikumaks ja tundlikumaks.

Põhimõisted: Kuidas digitaalsed varjud töötavad

Varjude loomine digitaalses 3D-maailmas ei ole nii lihtne kui lihtsalt 'valguse blokeerimine'. See on nutikas illusioon, mis on üles ehitatud mitmeastmelisele ja arvutusmahukale protsessile. Viimase kahe aastakümne jooksul reaalajas graafikas kõige levinum tehnika on varjude kaardistamine (Shadow Mapping).

Lühidalt valgustusest

Varju tekkimiseks on vaja kõigepealt valgust. 3D-graafikas simuleerime valgust mudelite abil, mis lähendavad selle käitumist. Põhimudel sisaldab:

• Hajusvalgus (Ambient Light): Pidev, suunatu valgus, mis valgustab kõike stseenis võrdselt. See simuleerib põrkunud, kaudset valgust ja tagab, et varjus olevad alad ei oleks puhtalt mustad.
• Difuusne valgus (Diffuse Light): Valgus, mis tuleb kindlast suunast (nagu päike) ja hajub, kui see pinnale langeb. Heledus sõltub valguse suuna ja pinna normaali vahelisest nurgast.
• Peegelduv valgus (Specular Light): Loob läikivatele pindadele heledaid laike, simuleerides valgusallika otsest peegeldust.

Varjud on otsese difuusse ja peegelduva valguse puudumine.

Varjude kaardistamise algoritmi selgitus

Kujutage ette, et olete valgusallikas. Kõik, mida näete, on valgustatud. Kõik, mis on teie vaateväljast teise objekti poolt varjatud, on varjus. Varjude kaardistamine digiteerib täpselt selle kontseptsiooni. See on kahekäiguline protsess.

1. käik: Valgusallika perspektiiv (varjukaardi loomine)

1. Mootor paigutab virtuaalse 'kaamera' valgusallika asukohta, vaadates suunas, kuhu valgus paistab.
2. Seejärel renderdab see kogu stseeni sellest valguse perspektiivist. Kuid see ei hooli värvidest ega tekstuuridest. Ainus teave, mida see salvestab, on sügavus.
3. Iga piksli kohta, mida see 'näeb', arvutab see kauguse valgusallikast esimese objektini, millele see langeb.
4. See sügavusteave salvestatakse spetsiaalsesse tekstuuri, mida nimetatakse sügavuskaardiks (Depth Map) või varjukaardiks (Shadow Map). See kaart on sisuliselt halltoonides pilt, kus heledamad pikslid tähistavad valgusallikale lähemaid objekte ja tumedamad pikslid kaugemaid objekte.

2. käik: Põhirenderdamine (stseeni joonistamine kasutajale)

1. Nüüd renderdab mootor stseeni tegeliku kasutaja kaamera perspektiivist, täpselt nii, nagu tavaliselt.
2. Iga üksiku piksli kohta, mida see ekraanile joonistama hakkab, teeb see lisakalkulatsiooni:
3. See määrab selle piksli asukoha 3D-maailmaruumis.
4. Seejärel arvutab see selle punkti kauguse valgusallikast. Nimetagem seda Kaugus A.
5. Järgmisena otsib see vastava väärtuse 1. käigus loodud varjukaardilt. See väärtus esindab kaugust valgusest lähima objektini selles suunas. Nimetagem seda Kaugus B.
6. Lõpuks võrdleb see kahte kaugust. Kui Kaugus A on suurem kui Kaugus B (pluss väike tolerants), tähendab see, et meie praeguse piksli ja valgusallika vahel on teine objekt. Seetõttu on see piksel varjus.
7. Kui piksel on määratud olevat varjus, jätab mootor selle jaoks otsese difuusse ja peegelduva valgustuse arvutamise vahele, renderdades seda ainult hajusvalgusega. Vastasel juhul on see täielikult valgustatud.

Seda protsessi korratakse miljonite pikslite jaoks, 90 korda sekundis, kahe eraldi silma jaoks. Seetõttu on varjud nii arvutusmahukad.

Varjude kaardistamise rakendamine WebXR-i raamistikes

Õnneks tegelevad kaasaegsed WebGL-i teegid nagu Three.js ja Babylon.js teie eest keerulise varjutaja loogikaga. Arendajana on teie ülesanne seadistada stseen õigesti, et varjud lubada ja neid peenhäälestada.

Üldised seadistamise sammud (kontseptuaalsed)

Protsess on erinevates raamistikes märkimisväärselt sarnane:

1. Luba varjud renderdajas: Kõigepealt peate peamisele renderdamismootorile ütlema, et kavatsete varje kasutada.
2. Seadista valgusallikas: Kõik valgusallikad ei saa varje heita. Peate lubama varjude heitmise kindlal valgusallikal (nt `DirectionalLight` või `SpotLight`).
3. Seadista varju heitja: Iga stseeni objekti puhul, millelt soovite varju heita (nagu tegelane või puu), peate selgesõnaliselt lubama selle `castShadow` omaduse.
4. Seadista varju vastuvõtja: Iga objekti puhul, millele peaksid varjud langema (nagu maapind või sein), peate lubama selle `receiveShadow` omaduse.

Põhiomadused, mida kohandada (kasutades Three.js näidet)

Hea väljanägemisega ja hästi toimivate varjude saamine on parameetrite kohandamise kunst. Siin on kõige olulisemad neist:

renderer.shadowMap.enabled = true;

See on pealüliti. Ilma selleta ei oma ükski teine seadistus tähtsust.

light.castShadow = true;

Lubab varjude heitmise kindla valgusallika jaoks. Olge väga valiv! Enamikus stseenides peaks jõudluse säilitamiseks dünaamilisi varje heitma ainult üks peamine valgusallikas (nagu päike).

mesh.castShadow = true; ja mesh.receiveShadow = true;

Need tõeväärtuse lipud kontrollivad objektide osalemist varjusüsteemis. Objekt võib varje heita, vastu võtta, mõlemat või mitte kumbagi.

light.shadow.mapSize.width ja light.shadow.mapSize.height

See on varjukaardi tekstuuri eraldusvõime. Suuremad väärtused toodavad teravamaid ja detailsemaid varje, kuid tarbivad rohkem GPU mälu ja protsessorivõimsust. Väärtused on tavaliselt kahe astmed (nt 512, 1024, 2048, 4096). Väärtus 1024x1024 on mõistlik alguspunkt korraliku kvaliteedi jaoks.

light.shadow.camera

See on virtuaalne kaamera, mida valgusallikas esimese käigu ajal kasutab. Selle omadused (`near`, `far`, `left`, `right`, `top`, `bottom`) defineerivad ruumala, mida tuntakse varju vaatetüvikuna (shadow frustum), mille piires varje renderdatakse. See on kõige olulisem optimeerimisvaldkond. Tehes selle vaatetüviku võimalikult väikeseks, et see teie stseeni tihedalt ümbritseks, koondate varjukaardi pikslid sinna, kus neil on kõige rohkem tähtsust, suurendades dramaatiliselt varjude kvaliteeti ilma kaardi suurust suurendamata.

light.shadow.bias ja light.shadow.normalBias

Need väärtused aitavad lahendada levinud artefakti, mida nimetatakse varjuakneks (shadow acne), mis ilmub valgustatud pindadele kummaliste tumedate mustritena. See juhtub täpsusvigade tõttu piksli sügavuse võrdlemisel varjukaardi sügavusega. `bias` nihutab sügavustesti pinnast veidi eemale. Tavaliselt on vaja väikest negatiivset väärtust. `normalBias` on kasulik pindadele, mis on valguse suhtes järsu nurga all. Kohandage neid väikeseid väärtusi hoolikalt, kuni akne kaob, põhjustamata varju eraldumist objektist (peter-panning efekt).

Koodijupp: Varjude põhiseadistus Three.js-is

            
// 1. Lülita renderdajas varjud sisse
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap; // Valikuline: pehmete varjude jaoks

// 2. Loo valgusallikas ja luba varjude heitmine
const directionalLight = new THREE.DirectionalLight(0xffffff, 1.0);
directionalLight.position.set(10, 20, 5);
directionalLight.castShadow = true;
scene.add(directionalLight);

// Seadista varju omadused
directionalLight.shadow.mapSize.width = 2048;
directionalLight.shadow.mapSize.height = 2048;
directionalLight.shadow.camera.near = 0.5;
directionalLight.shadow.camera.far = 50;
directionalLight.shadow.camera.left = -20;
directionalLight.shadow.camera.right = 20;
directionalLight.shadow.camera.top = 20;
directionalLight.shadow.camera.bottom = -20;
directionalLight.shadow.bias = -0.001;

// 3. Loo maapind varjude vastuvõtmiseks
const groundGeometry = new THREE.PlaneGeometry(50, 50);
const groundMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa });
const ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.receiveShadow = true;
scene.add(ground);

// 4. Loo objekt varjude heitmiseks
const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.y = 2;
box.castShadow = true;
scene.add(box);

            

              
                Copy
              
            
          

Täiustatud varjutehnikad kõrgema realismi saavutamiseks

Põhiline varjude kaardistamine tekitab kõvasid, sakilisi servi. Et saavutada pehmeid, nüansseeritud varje, mida näeme reaalses maailmas, vajame täiustatud tehnikaid.

Pehmed varjud: Percentage-Closer Filtering (PCF)

Reaalsuses on varjudel pehmed servad (penumbra). See on sellepärast, et valgusallikad ei ole lõpmatult väikesed punktid. PCF on kõige levinum algoritm selle efekti simuleerimiseks. Selle asemel, et võtta varjukaardilt ainult üks proov piksli kohta, võtab PCF mitu proovi sihtkoordinaadi ümber väikeses raadiuses ja keskmistab tulemused. Kui mõned proovid on varjus ja mõned mitte, on tulemuseks hall piksel, luues pehme serva. Enamik WebGL-i raamistikke pakub PCF-i rakendust karbist välja (nt `THREE.PCFSoftShadowMap` Three.js-is).

Variance Shadow Maps (VSM) ja Exponential Shadow Maps (ESM)

VSM ja ESM on alternatiivsed tehnikad väga pehmete varjude loomiseks. Selle asemel, et salvestada varjukaardile ainult sügavust, salvestavad nad sügavuse ja sügavuse ruudu (dispersiooni). See võimaldab varjukaardile rakendada täiustatud filtreerimistehnikaid (nagu Gaussi hägu), mille tulemuseks on kaunilt siledad pehmed varjud, mida on sageli kiirem renderdada kui suure proovide arvuga PCF-i. Siiski võivad need kannatada artefakti all, mida nimetatakse 'valguse lekkimiseks' (light bleeding), kus valgus näib ebaõigesti läbivat õhukesi objekte.

Kontaktvarjud

Standardsetel varjukaartidel on oma piiratud eraldusvõime ja 'bias'-kohanduste tõttu sageli raskusi väikeste, teravate ja tumedate varjude loomisega, mis tekivad seal, kus objekt pinnaga kokku puutub. Nende 'kontaktvarjude' puudumine võib kaasa aidata 'peter-panning' efektile, kus objektid näevad välja, nagu hõljuksid nad kergelt. Levinud lahendus on kasutada sekundaarset, odavat varjutehnikat. See võib olla lihtne, tume, läbipaistev ümmargune tekstuur ('blob shadow'), mis asetatakse tegelase alla, või keerukam ekraaniruumi tehnika, mis lisab tumendust kokkupuutepunktides.

Eelküpsetatud (Baked) valgustus ja varjud

Nende stseeni osade jaoks, mis on staatilised (nt hooned, maastik, suured rekvisiidid), ei pea te varje iga kaadri jaoks arvutama. Selle asemel saate need eelnevalt arvutada 3D-modelleerimisprogrammis nagu Blender ja 'küpsetada' need tekstuuri, mida nimetatakse valguskaardiks (lightmap). See tekstuur rakendatakse seejärel teie mudelitele.

• Plussid: Kvaliteet võib olla fotorealistlik, sealhulgas pehmed varjud, värvide ülekandumine ja kaudne valgustus. Jõudluskulu käitusajal on peaaegu null – see on vaid üks lisatekstuuri otsing.
• Miinused: See on täiesti staatiline. Kui valgusallikas või objekt liigub, siis küpsetatud vari ei muutu.

Hübriidne lähenemine on sageli parim: kasutage staatilise keskkonna jaoks kvaliteetset küpsetatud valgustust ja ühte reaalajas varju heitvat valgusallikat dünaamiliste objektide, näiteks kasutaja avatari ja interaktiivsete esemete jaoks.

Jõudlus: reaalajas varjude Achilleuse kand WebXR-is

See on kõige kriitilisem jaotis iga WebXR-i arendaja jaoks. Kaunis stseen, mis töötab 20 kaadrit sekundis, on VR-is kasutuskõlbmatu ja põhjustab tõenäoliselt liikumishaigust. Jõudlus on esmatähtis.

Miks WebXR on nii nõudlik

• Stereorenderdamine: Kogu stseen tuleb renderdada kaks korda, üks kord kummagi silma jaoks. See sisuliselt kahekordistab renderdamise töökoormust.
• Kõrged kaadrisagedused: Ebamugavuse vältimiseks ja kohalolu tunde loomiseks nõuavad peakomplektid väga kõrgeid ja stabiilseid kaadrisagedusi – tavaliselt 72 Hz, 90 Hz või isegi 120 Hz. See jätab väga vähe aega (umbes 11 millisekundit kaadri kohta 90 Hz juures), et teha kõik arvutused, sealhulgas varjude kaardistamine.
• Mobiilne riistvara: Paljud kõige populaarsemad XR-seadmed (nagu Meta Quest seeria) põhinevad mobiilsetel kiibistikel, millel on oluliselt vähem arvutusvõimsust ja termilist varu kui lauaarvutil.

Otsustavad optimeerimisstrateegiad

Iga otsus varjude kohta tuleb kaaluda selle jõudluskulu suhtes. Siin on teie peamised optimeerimisvahendid:

1. Piirake varju heitvate valgusallikate arvu: See ei ole läbiräägitav. Mobiilse WebXR-i jaoks peaksite peaaegu alati jääma ühe dünaamilise, varju heitva valgusallika juurde. Ükski täiendav valgusallikas ei tohiks varje heita.
2. Vähendage varjukaardi eraldusvõimet: Vähendage `mapSize` nii palju kui võimalik, enne kui kvaliteet muutub vastuvõetamatuks. 1024x1024 kaart on neli korda odavam töödelda kui 2048x2048 kaart. Alustage madalalt ja suurendage ainult vajadusel.
3. Pingutage agressiivselt varju vaatetüvikut: See on kõige tõhusam optimeerimine. Ärge kasutage üldist, suurt vaatetüvikut, mis katab kogu teie maailma. Arvutage selle ala piirid, kus varjud on mängijale tegelikult nähtavad, ja uuendage iga kaader valgusallika varjukaamerat (`left`, `right`, `top`, `bottom`, `near`, `far`), et see ümbritseks tihedalt ainult seda ala. See koondab iga väärtusliku piksli teie varjukaardil täpselt sinna, kus seda vaja on, parandades massiivselt kvaliteeti sama jõudluskuluga.
4. Olge valiv varju heitjate ja vastuvõtjatega: Kas see väike kivike peab heitma keerulist varju? Kas laua alumine külg, mida kasutaja kunagi ei näe, peab varje vastu võtma? Käige oma stseeni objektid läbi ja keelake `.castShadow` ja `.receiveShadow` kõige jaoks, mis ei ole visuaalselt oluline.
5. Kasutage kaskaadvarjukaarte (CSM): Suurte, avatud maailma stseenide jaoks, mida valgustab suunavalgus (päike), on üks varjukaart ebaefektiivne. CSM on täiustatud tehnika, mis jagab kaamera vaatetüviku mitmeks osaks (kaskaadiks). See kasutab kõrge eraldusvõimega varjukaarti mängijale kõige lähemal asuva kaskaadi jaoks (kus on vaja detaile) ja järjest madalama eraldusvõimega kaarte kaugemate kaskaadide jaoks. See pakub kvaliteetseid varje lähedalt ilma massiivse, kõrge eraldusvõimega varjukaardi kuluta kogu stseeni jaoks. Nii Three.js-il kui ka Babylon.js-il on abivahendid CSM-i rakendamiseks.
6. Petke! Kasutage laiguvarje (Blob Shadows): Dünaamiliste objektide, näiteks tegelaste või esemete jaoks, mida kasutaja saab liigutada, on mõnikord kõige odavam ja tõhusam lahendus lihtne läbipaistev tasapind, millel on pehme, ümmargune tekstuur ja mis on paigutatud otse objekti alla. See 'laiguvari' maandab objekti tõhusalt murdosa reaalajas varjude kaardistamise kuludest.

WebXR-i valgustuse tulevik

Reaalajas veebigraafika maastik areneb kiiresti, lubades veelgi võimsamaid ja tõhusamaid viise valguse ja varjude renderdamiseks.

WebGPU

WebGPU on järgmise põlvkonna graafika API veebile, mis on loodud olema tõhusam ja pakkuma madalama taseme juurdepääsu GPU-le kui WebGL. Varjude jaoks tähendab see otsesemat kontrolli renderdamistoru üle ja juurdepääsu funktsioonidele nagu arvutusvarjutajad (compute shaders). See võiks võimaldada keerukamate ja jõudsamate varjualgoritmide, näiteks klasterdatud edasisuunalise renderdamise (clustered forward rendering) või keerukamate pehmete varjude filtreerimistehnikate sujuvat toimimist brauseris.

Reaalajas kiirtejälitus (Ray Tracing)?

Kuigi täielik reaalajas kiirtejälitus (mis simuleerib valguskiirte teekonda täiuslikult täpsete varjude, peegelduste ja globaalse valgustuse jaoks) on endiselt liiga arvutusmahukas peavoolu WebXR-i jaoks, näeme esimesi samme. Hübriidsed lähenemised, kus kiirtejälitust kasutatakse spetsiifiliste efektide, näiteks täpsete kõvade varjude või peegelduste jaoks, samal ajal kui ülejäänud stseen renderdatakse traditsiooniliselt rasterdamise teel, võivad muutuda teostatavaks WebGPU ja võimsama riistvara tulekuga. Teekond on pikk, kuid fotorealistliku valgustuse potentsiaal veebis on silmapiiril.

Kokkuvõte: õige tasakaalu leidmine

Varjud ei ole WebXR-is luksus; nad on usutava ja mugava kaasahaarava kogemuse põhikomponent. Nad maandavad objekte, defineerivad ruumi ja muudavad 3D-mudelite kogumi ühtseks maailmaks. Kuid nende võimsus tuleb märkimisväärse jõudluskuluga, mida tuleb hoolikalt hallata.

Edu võti ei ole lihtsalt ühe kvaliteetse varjualgoritmi lubamine, vaid keeruka valgustusstrateegia arendamine. See hõlmab tehnikate läbimõeldud kombinatsiooni: kvaliteetne küpsetatud valgustus staatilise maailma jaoks, üks, tugevalt optimeeritud reaalajas valgusallikas dünaamiliste elementide jaoks ja nutikad 'pettused' nagu laiguvarjud ja kontakti kõvendamine illusiooni müümiseks.

Globaalse WebXR-i arendajana on teie eesmärk leida täiuslik tasakaal visuaalse täpsuse ja jõudsa edastuse vahel. Alustage lihtsalt. Profileerige pidevalt. Optimeerige lakkamatult. Varjude kaardistamise kunsti ja teaduse valdamisega saate luua tõeliselt hingematvaid ja kaasahaaravaid elamusi, mis on kättesaadavad kasutajatele üle maailma, mis tahes seadmes. Nüüd minge ja tooge oma virtuaalsed maailmad välja lamedast, valgustamata pimedusest.